<template>
  <div class="works">
    <div class="workWrap">
      <div class="model cf">
        <div class="card">
          <a-spin :spinning="state.spinning" tip="加载中...">
            <div class="taskTitle">
              <p></p>
              <p>
                <span>任务统计</span>
                <span>（全部待办/今日总数）</span>
              </p>
            </div>
            <ul class="list cf">
              <li>
                <p>
                  <!-- <a-statistic :value="122" />
                <span>/</span>
                <a-statistic :value="122" /> -->
                  <CountTo
                    :startVal="0"
                    :endVal="
                      state.followUp.incompleteFollowTaskCount
                        ? state.followUp.incompleteFollowTaskCount
                        : 0
                    "
                    :duration="1000"
                  >
                  </CountTo>
                  <span>/</span>
                  <CountTo
                    :startVal="0"
                    :endVal="state.followUp.followTaskCount ? state.followUp.followTaskCount : 0"
                    :duration="1000"
                  >
                  </CountTo>
                </p>
                <p>随访任务</p>
              </li>
              <li>
                <p>
                  <CountTo
                    :startVal="0"
                    :endVal="
                      state.followUp.incompleteAdverseTaskCount
                        ? state.followUp.incompleteAdverseTaskCount
                        : 0
                    "
                    :duration="1000"
                  >
                  </CountTo>
                  <span>/</span>
                  <CountTo
                    :startVal="0"
                    :endVal="state.followUp.adverseTaskCount ? state.followUp.adverseTaskCount : 0"
                    :duration="1000"
                  >
                  </CountTo>
                </p>
                <p>不良事件</p>
              </li>
              <li>
                <p>
                  <CountTo
                    :startVal="0"
                    :endVal="
                      state.followUp.incompleteRecheckTaskCount
                        ? state.followUp.incompleteRecheckTaskCount
                        : 0
                    "
                    :duration="1000"
                  >
                  </CountTo>
                  <span>/</span>
                  <CountTo
                    :startVal="0"
                    :endVal="state.followUp.recheckTaskCount ? state.followUp.recheckTaskCount : 0"
                    :duration="1000"
                  >
                  </CountTo>
                </p>
                <p>复查提醒</p>
              </li>
            </ul>
          </a-spin>
        </div>
        <div class="card">
          <a-spin :spinning="state.patientSpinning" tip="加载中...">
            <div class="taskTitle">
              <p></p>
              <p>
                <a-badge :count="state.patientData.count" :offset="['10px', '0px']">
                  <span>患者数据变更</span>
                </a-badge>
              </p>
              <p class="checkMore" @click="checkMoreFun">
                <span>查看全部变更</span>
                <img src="@/assets/hmm/1.png" alt="" />
              </p>
            </div>
            <!-- state.patientData.list && state.patientData.list.length > 0 ? '' : 'on' -->
            <ul
              class="patientList"
              v-if="state.patientData.list && state.patientData.list.length > 0"
            >
              <li
                v-for="(item, index) in state.patientData.list"
                :key="index"
                @click="detail(item)"
              >
                <p>
                  <span></span>
                  <span>{{ item.msgTime ? transformTimeCheck(item.msgTime, 'minutes') : '' }}</span>
                </p>
                <!-- 通过给 class 新增样式  -->
                <p class="purple">
                  <span>{{ item.msgTitle }}</span>
                  <a-tooltip placement="topLeft">
                    <template #title>
                      <span>{{ item.msgContext }}</span>
                    </template>
                    <span>{{ item.msgContext }}</span>
                  </a-tooltip>
                </p>
                <p :class="item.isRead == 0 ? '' : 'on'">
                  {{ item.isRead == 0 ? '未读' : '已读' }}
                </p>
              </li>
            </ul>
            <a-empty v-else class="mt16" />
          </a-spin>
        </div>
      </div>
      <div class="model mt16 cf">
        <div class="card cardTwo">
          <a-spin :spinning="state.followUpSpinning" tip="加载中...">
            <div class="taskTitle">
              <p></p>
              <p>
                <span>随访任务</span>
              </p>
              <p class="followUp">
                <span
                  :class="state.followUpActive == index ? 'on' : ''"
                  v-for="(item, index) in state.followUpList"
                  @click="followUpFun('followUp', index)"
                  :key="index"
                  >{{ item.name }}</span
                >
              </p>
            </div>
            <a-table
              class="followUpTable"
              :dataSource="state.tableData"
              :columns="state.columns"
              :scroll="{ y: 405 }"
              :pagination="false"
              v-if="state.tableData && state.tableData.length > 0"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'remindTime'">
                  <p>
                    {{ record.remindTime ? transformTimeCheck(record.remindTime, 'minutes') : '' }}
                  </p>
                </template>
                <template v-if="column.key === 'planTime'">
                  <p>{{ record.planTime ? transformTimeCheck(record.planTime, 'date') : '' }}</p>
                </template>
                <template v-if="column.key === 'reason'">
                  <a-tooltip placement="top">
                    <template #title> {{ record.reason }}</template>
                    <p class="flexs">{{ record.reason }}</p>
                  </a-tooltip>
                </template>
                <template v-if="column.key === 'action'">
                  <p class="btn">
                    <a-button type="link" @click="followUpDetail(record, 'followUp')"
                      >详情</a-button
                    >
                    <a-popconfirm
                      title="确定忽略该任务吗?"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="confirm(record, 'followUp')"
                      v-if="state.followUpActive == 0"
                    >
                      <a-button type="link">忽略</a-button>
                    </a-popconfirm>
                  </p>
                </template>
              </template>
            </a-table>
            <a-empty v-else class="mt150" />
          </a-spin>
        </div>
        <div class="card cardTwo">
          <a-spin :spinning="state.AdverseReactionsSpinning" tip="加载中...">
            <div class="taskTitle">
              <p></p>
              <p>
                <span>不良反应</span>
              </p>
              <p class="followUp">
                <span
                  :class="state.reactionActive == index ? 'on' : ''"
                  v-for="(item, index) in state.followUpList"
                  @click="followUpFun('reaction', index)"
                  :key="index"
                  >{{ item.name }}</span
                >
              </p>
            </div>
            <a-table
              class="followUpTable"
              :dataSource="state.reactionTableData"
              :columns="state.reactionColumns"
              :scroll="{ y: 405 }"
              :pagination="false"
              v-if="state.reactionTableData && state.reactionTableData.length > 0"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'reportTime'">
                  <p>
                    {{ record.reportTime ? transformTimeCheck(record.reportTime, 'minutes') : '' }}
                  </p>
                </template>
                <template v-if="column.key === 'eventContext'">
                  <a-tooltip placement="top">
                    <template #title> {{ record.eventContext }}</template>
                    <p class="flexs">{{ record.eventContext }}</p>
                  </a-tooltip>
                </template>
                <template v-if="column.key === 'action'">
                  <p class="btn">
                    <a-button type="link" @click="followUpDetail(record, 'AdverseReactions')"
                      >详情</a-button
                    >
                    <a-popconfirm
                      title="确定忽略该任务吗?"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="confirm(record, 'AdverseReactions')"
                      v-if="state.reactionActive == 0"
                    >
                      <a-button type="link">忽略</a-button>
                    </a-popconfirm>
                  </p>
                </template>
              </template>
            </a-table>
            <a-empty v-else class="mt150" />
          </a-spin>
        </div>
      </div>
      <div class="model mt16 cf">
        <div class="card unreviewed">
          <a-spin :spinning="state.remindSpinning" tip="加载中...">
            <div class="taskTitle">
              <p></p>
              <p>
                <span>未复查患者</span>
              </p>
              <p class="followUp">
                <span
                  :class="state.unreviewedActive == index ? 'on' : ''"
                  v-for="(item, index) in state.followUpList"
                  @click="followUpFun('unreviewed', index)"
                  :key="index"
                  >{{ item.name }}</span
                >
              </p>
            </div>
            <a-table
              class="followUpTable"
              :dataSource="state.unreviewedTableData"
              :columns="state.unreviewedColumns"
              :scroll="{ y: 405 }"
              :pagination="false"
              v-if="state.unreviewedTableData && state.unreviewedTableData.length > 0"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'remindTime'">
                  <p>
                    {{ record.remindTime ? transformTimeCheck(record.remindTime, 'minutes') : '' }}
                  </p>
                </template>
                <template v-if="column.key === 'planTime'">
                  <p>{{ record.planTime ? transformTimeCheck(record.planTime, 'date') : '' }}</p>
                </template>
                <template v-if="column.key === 'lastRemindTime'">
                  <p>
                    {{
                      record.lastRemindTime ? transformTimeCheck(record.lastRemindTime, 'date') : ''
                    }}
                  </p>
                </template>
                <template v-if="column.key === 'lastManageType'">
                  <p>{{ record.lastManageType == 1 ? '人工' : '自动' }}</p>
                </template>
                <template v-if="column.key === 'reason'">
                  <a-tooltip placement="top">
                    <template #title> {{ record.reason }}</template>
                    <p class="flexs">{{ record.reason }}</p>
                  </a-tooltip>
                </template>
                <template v-if="column.key === 'failReason'">
                  <a-tooltip placement="top">
                    <template #title> {{ record.failReason }}</template>
                    <p class="flexs">{{ record.failReason }}</p>
                  </a-tooltip>
                </template>
                <template v-if="column.key === 'action'">
                  <p class="btn">
                    <a-button type="link" @click="followUpDetail(record, 'remind')">详情</a-button>
                    <a-popconfirm
                      title="确定忽略该任务吗?"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="confirm(record, 'remind')"
                      v-if="state.unreviewedActive == 0"
                    >
                      <a-button type="link">忽略</a-button>
                    </a-popconfirm>
                  </p>
                </template>
              </template>
            </a-table>
            <a-empty v-else class="mt16" />
          </a-spin>
        </div>
      </div>
      <a-modal
        class="patientModal"
        v-model:open="open"
        title="患者数据变更"
        cancel-text="关闭"
        @ok="hideModal"
        width="50%"
        :maskClosable="false"
      >
        <a-spin :spinning="state.patientSpinningTwo" tip="加载中...">
          <div class="wrap">
            <div class="notice">
              <p>
                <img src="@/assets/hmm/2.png" alt="" />
                <span>{{ state.patientData.countTwo }}条未读数据</span>
              </p>
              <p v-if="state.patientData.countTwo != 0" @click="clearReadFun">清除未读</p>
            </div>
            <div
              class="scrollWrap"
              v-if="state.patientData.listTwo && state.patientData.listTwo.length > 0"
            >
              <ul class="list">
                <li
                  v-for="(item, index) in state.patientData.listTwo"
                  :key="index"
                  @click.stop="detail(item)"
                >
                  <p>
                    <span></span>
                    <span>{{
                      item.msgTime ? transformTimeCheck(item.msgTime, 'minutes') : ''
                    }}</span>
                  </p>
                  <!-- 通过给 class 新增样式  -->
                  <p class="purple">
                    <span>{{ item.msgTitle }}</span>
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span>{{ item.msgContext }}</span>
                      </template>
                      <span>{{ item.msgContext }}</span>
                    </a-tooltip>
                  </p>
                  <p :class="item.isRead == 0 ? '' : 'on'">
                    {{ item.isRead == 0 ? '未读' : '已读' }}
                  </p>
                </li>
              </ul>
            </div>
            <a-empty v-else class="mt16" />
          </div>
        </a-spin>
      </a-modal>
      <a-modal
        class="patientModal"
        v-model:open="openDetail"
        title="消息详情"
        cancel-text="关闭"
        @ok="hideModalDetail"
        @cancel="hideModalDetail"
        width="40%"
        :maskClosable="false"
      >
        <a-spin :spinning="state.patientSpinningThree" tip="加载中...">
          <div class="wrapPatient">
            <div class="patient">
              <p>
                <span></span>
                <span>{{
                  state.detailInfo.msgTime ? transformTime(state.detailInfo.msgTime, 1) : ''
                }}</span>
              </p>
              <!-- 通过给 class 新增样式  -->
              <p class="on purple">
                <span>{{ state.detailInfo.msgTitle }}</span>
                <span>{{ state.detailInfo.msgContext }}</span>
              </p>
              <!-- <p class="on">
            <span>HP感染专病库</span>
            <span>为您新分配3例患者</span>
          </p> -->
              <p @click="patientManag">患者管理</p>
            </div>
            <a-table
              class="followUpTable"
              :dataSource="state.messageTableData"
              :columns="state.messageColumns"
              :scroll="{ y: 405 }"
              :pagination="false"
              v-if="state.messageTableData && state.messageTableData.length > 0"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'visitTime'">
                  <p class="flexs">
                    {{ record.visitTime ? transformTimeTwo(record.visitTime, 'minutes') : '' }}
                  </p>
                </template>
                <template v-if="column.key === 'action'">
                  <p
                    :class="['btn detail', state.patientListObj.msgType == 3 ? 'on' : '']"
                    @click="patientManagFun(record)"
                  >
                    <a-button :disabled="state.patientListObj.msgType == 3" type="link"
                      >查看详情</a-button
                    >
                  </p>
                </template>
              </template>
            </a-table>
            <a-empty v-else class="mt16" />
          </div>
        </a-spin>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts" setup name="工作台">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Modal, message } from 'ant-design-vue'
import CountTo from '@/components/CountTo/vue-countTo.vue'
import { transformTime, transformTimeTwo, transformTimeCheck } from '@/assets/hmmJs/index.js'
import {
  countTask,
  messageTaskCount,
  messageList,
  clearRead,
  messageInfoList,
  followList,
  followUpdate,
  adverseList,
  adverseUpdate,
  remindList,
  remindUpdate
} from '@/api/work/index.ts'
const router = useRouter()
const route = useRoute()
const state = reactive({
  spinning: false,
  followUp: {
    followTaskCount: 0,
    incompleteFollowTaskCount: 0,
    adverseTaskCount: 0,
    incompleteAdverseTaskCount: 0,
    recheckTaskCount: 0,
    incompleteRecheckTaskCount: 0
  },
  patientSpinning: false,
  patientData: {
    count: 0,
    list: [],
    countTwo: 0,
    listTwo: []
  },
  patientSpinningTwo: false,
  detailInfo: {},
  patientSpinningThree: false,
  followUpSpinning: false,
  followUpList: [
    {
      name: '未处理',
      id: 0
    },
    {
      name: '已处理',
      id: 1
    }
  ],
  followUpActive: 0,
  columns: [
    {
      title: '患者姓名',
      dataIndex: 'patName',
      // width: 100,
      key: 'patName'
    },
    {
      title: '任务提醒时间',
      dataIndex: 'remindTime',
      width: 150,
      key: 'remindTime'
    },
    {
      title: '计划随访时间',
      dataIndex: 'planTime',
      key: 'planTime'
    },
    {
      title: '随访原因',
      dataIndex: 'reason',
      key: 'reason'
    },
    {
      title: '操作',
      key: 'action'
    }
  ],
  tableData: [],
  AdverseReactionsSpinning: false,
  reactionActive: 0,
  reactionColumns: [
    {
      title: '患者姓名',
      dataIndex: 'patName',
      // width: 100,
      key: 'patName'
    },
    {
      title: '事件报告时间',
      dataIndex: 'reportTime',
      key: 'reportTime'
    },
    {
      title: '不良反应内容',
      dataIndex: 'eventContext',
      key: 'eventContext'
    },
    {
      title: '操作',
      key: 'action'
    }
  ],
  reactionTableData: [],
  remindSpinning: false,
  unreviewedActive: 0,
  unreviewedColumns: [
    {
      title: '患者姓名',
      dataIndex: 'patName',
      width: 100,
      key: 'patName'
    },
    {
      title: '任务提醒时间',
      dataIndex: 'remindTime',
      key: 'remindTime'
    },
    {
      title: '计划复查时间',
      dataIndex: 'planTime',
      key: 'planTime'
    },
    {
      title: '复查原因',
      dataIndex: 'reason',
      key: 'reason'
    },
    {
      title: '上次复查提醒时间',
      dataIndex: 'lastRemindTime',
      width: 150,
      key: 'lastRemindTime'
    },
    {
      // 上次复查提醒类型  待会后端传过来
      title: '上次复查提醒类型',
      dataIndex: 'lastManageType',
      key: 'lastManageType'
    },
    {
      title: '累计提醒次数',
      dataIndex: 'recheckCount',
      key: 'recheckCount'
    },
    {
      title: '未复查原因',
      dataIndex: 'failReason',
      key: 'failReason'
    },
    {
      title: '操作',
      key: 'action'
    }
  ],
  unreviewedTableData: [],
  // 消息详情
  messageColumns: [
    {
      title: '姓名',
      dataIndex: 'patName',
      // width: 100,
      key: 'patName'
      // align: 'center'
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age'
      // align: 'center'
    },
    {
      title: '就诊时间',
      dataIndex: 'visitTime',
      width: 200,
      key: 'visitTime'
      // align: 'center'
    },
    {
      title: '接诊医生',
      dataIndex: 'doctorName',
      key: 'doctorName'
      // align: 'center'
    },
    {
      title: '操作',
      key: 'action'
      // align: 'center'
    }
  ],
  messageTableData: [],
  patientListObj: {}
})
const open = ref<boolean>(false)
const openDetail = ref<boolean>(false)
onMounted(() => {
  init()
})
const init = () => {
  countTaskFun()
  messageTaskCountFun('')
  messageListFun('')
  followListFun()
  adverseListFun()
  remindListFun()
}
const countTaskFun = () => {
  state.spinning = true
  countTask({})
    .then((res) => {
      state.spinning = false
      state.followUp.followTaskCount = res.data.followTaskCount
      state.followUp.incompleteFollowTaskCount = res.data.incompleteFollowTaskCount
      state.followUp.adverseTaskCount = res.data.adverseTaskCount
      state.followUp.incompleteAdverseTaskCount = res.data.incompleteAdverseTaskCount
      state.followUp.recheckTaskCount = res.data.recheckTaskCount
      state.followUp.incompleteRecheckTaskCount = res.data.incompleteRecheckTaskCount
    })
    .catch(() => {
      state.spinning = false
    })
}
const messageTaskCountFun = (name) => {
  if (name == 'more') {
    let param = {
      isRead: 0
    }
    messageTaskCount(param).then((res) => {
      state.patientData.countTwo = res.data ? res.data : 0
    })
  } else {
    let param = {
      day: 'today'
    }
    messageTaskCount(param).then((res) => {
      state.patientData.count = res.data ? res.data : 0
    })
  }
}
const messageListFun = (name) => {
  if (name == 'more') {
    state.patientSpinningTwo = true
    let param = {
      limit: '',
      isRead: ''
    }
    messageList(param)
      .then((res) => {
        state.patientSpinningTwo = false
        state.patientData.listTwo = res.data && res.data.length > 0 ? res.data : []
      })
      .catch(() => {
        state.patientSpinningTwo = false
      })
  } else {
    state.patientSpinning = true
    let param = {
      limit: 3,
      isRead: 0
    }
    state.patientListObj = {}
    messageList(param)
      .then((res) => {
        state.patientSpinning = false
        state.patientData.list = res.data && res.data.length > 0 ? res.data : []
      })
      .catch(() => {
        state.patientSpinning = false
      })
  }
}
const clearReadFun = () => {
  state.patientSpinningTwo = true
  clearRead({})
    .then((res) => {
      state.patientSpinningTwo = false
      message.success('清除未读成功')
      messageListFun('more')
      messageTaskCountFun('more')
      messageTaskCountFun()
      messageListFun()
    })
    .catch(() => {
      state.patientSpinningTwo = false
    })
}
const checkMoreFun = () => {
  open.value = true
  messageListFun('more')
  messageTaskCountFun('more')
}
const detail = (item) => {
  open.value = false
  openDetail.value = true
  state.detailInfo = item
  state.patientListObj = item
  messageInfoListFun(item)
}
const messageInfoListFun = (item) => {
  state.messageTableData = []
  state.patientSpinningThree = true
  messageInfoList({
    id: item.id
  })
    .then((res) => {
      state.patientSpinningThree = false
      state.messageTableData = res.data
    })
    .catch(() => {
      state.patientSpinningThree = false
    })
}
const followUpDetail = (item, name) => {
  if (name == 'followUp') {
    router.push({
      path: '/patientManagement/index',
      query: {
        groupId: item.groupId,
        patId: item.patId,
        id: item.id,
        tabId: '5'
      }
    })
  } else if (name == 'AdverseReactions') {
    router.push({
      path: '/patientManagement/index',
      query: {
        groupId: item.groupId,
        patId: item.patId,
        id: item.id,
        tabId: '6'
      }
    })
  } else {
    router.push({
      path: '/patientManagement/index',
      query: {
        groupId: item.groupId,
        patId: item.patId,
        id: item.id,
        tabId: '7'
      }
    })
  }
}
const patientManag = () => {
  router.push({
    path: '/patientManagement/index'
  })
}
const patientManagFun = (item) => {
  router.push({
    path: '/patientManagement/index',
    query: {
      groupId: item.groupId,
      patId: item.patId
    }
  })
}
const hideModal = () => {
  open.value = false
}
const hideModalDetail = () => {
  openDetail.value = false
  messageTaskCountFun()
  messageListFun()
}

const followListFun = () => {
  state.followUpSpinning = true
  followList({
    isCompletion: state.followUpActive
  })
    .then((res) => {
      state.followUpSpinning = false
      state.tableData = res.data
    })
    .catch(() => {
      state.followUpSpinning = false
    })
}
const adverseListFun = () => {
  state.AdverseReactionsSpinning = true
  adverseList({
    isCompletion: state.reactionActive
  })
    .then((res) => {
      state.AdverseReactionsSpinning = false
      state.reactionTableData = res.data
    })
    .catch(() => {
      state.AdverseReactionsSpinning = false
    })
}
const remindListFun = () => {
  state.remindSpinning = true
  remindList({
    isCompletion: state.unreviewedActive
  })
    .then((res) => {
      state.remindSpinning = false
      state.unreviewedTableData = res.data
    })
    .catch(() => {
      state.remindSpinning = false
    })
}
const followUpFun = (name, index) => {
  if (name == 'followUp') {
    state.followUpActive = index
    followListFun()
  } else if (name == 'reaction') {
    state.reactionActive = index
    adverseListFun()
  } else {
    state.unreviewedActive = index
    remindListFun()
  }
}

const followUpdateFun = (item) => {
  state.followUpSpinning = true
  followUpdate({
    id: item.id,
    status: 1
  })
    .then((res) => {
      state.followUpSpinning = false
      message.success('忽略成功')
      followListFun()
      countTaskFun()
    })
    .catch(() => {
      state.followUpSpinning = false
    })
}
const adverseUpdateFun = (item) => {
  state.AdverseReactionsSpinning = true
  adverseUpdate({
    id: item.id,
    status: 1
  })
    .then((res) => {
      state.AdverseReactionsSpinning = false
      message.success('忽略成功')
      adverseListFun()
      countTaskFun()
    })
    .catch(() => {
      state.AdverseReactionsSpinning = false
    })
}
const remindUpdateFun = (item) => {
  state.remindSpinning = true
  remindUpdate({
    id: item.id,
    status: 1
  })
    .then((res) => {
      state.remindSpinning = false
      message.success('忽略成功')
      remindListFun()
      countTaskFun()
    })
    .catch(() => {
      state.remindSpinning = false
    })
}
// 忽略
const confirm = (e, name) => {
  if (name == 'followUp') {
    followUpdateFun(e)
  } else if (name == 'AdverseReactions') {
    adverseUpdateFun(e)
  } else {
    remindUpdateFun(e)
  }
}
</script>

<style lang="less" scoped>
.mt16 {
  margin-top: 16px;
}
.mt150 {
  margin-top: 150px;
}
p {
  margin: 0;
}
.works {
  .workWrap {
    // height: 100%;
    // overflow: auto;
  }
  .model {
    .card {
      padding: 24px;
      border-radius: 8px;
      width: calc(50% - 8px);
      float: left;
      background: #fff;
      height: 235px;
      &.cardTwo {
        height: 536px;
      }
      &.unreviewed {
        width: 100%;
        float: inherit;
        height: auto;
        // min-height: 300px;
        max-height: 560px;
      }
      &:nth-child(1) {
        margin-right: 16px;
      }
      .taskTitle {
        position: relative;
        p {
          display: inline-block;
          vertical-align: middle;
          &:nth-child(1) {
            width: 3px;
            height: 16px;
            background: #165dff;
          }
          &:nth-child(2) {
            margin-left: 10px;
            height: 28px;
            line-height: 28px;
            span {
              font-weight: 700;
              font-size: 18px;
              color: #1d2129;
              &:nth-child(2) {
                font-weight: 400;
                color: #86909c;
                font-size: 14px;
              }
            }
          }
          &.checkMore {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 14px;
            color: #86909c;
            span {
              display: inline-block;
              vertical-align: middle;
            }
            img {
              transform: rotate(-90deg);
              width: 15px;
              display: inline-block;
              vertical-align: middle;
            }
            &:hover {
              cursor: pointer;
              color: #4080ff;
            }
          }
          &.followUp {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 14px;
            color: #4e5969;
            span {
              display: inline-block;
              vertical-align: middle;
              padding: 2px 8px;
              border: 1px solid #e5e6eb;
              &:nth-child(1) {
                border-right: 0;
                border-top-left-radius: 2px;
                border-bottom-left-radius: 2px;
              }
              &:nth-child(2) {
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
              }

              &.on {
                background: #165dff;
                border-color: #165dff;
                color: #fff;
              }
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
      .list {
        background: #f7f8fa;
        border-radius: 8px;
        margin: 16px auto 0;
        height: 146px;
        li {
          width: 33.3%;
          padding: 35px 0;
          float: left;
          text-align: center;
          p {
            font-size: 14px;
            color: #4e5969;
            &:nth-child(1) {
              span {
                font-size: 30px;
                color: #ff7d00;
                font-weight: 700;
                font-family: DIN-Bold;
                &:nth-child(2),
                &:nth-child(3) {
                  color: #1d2129;
                }
              }
              // :deep(.ant-statistic) {
              //   display: inline-block;
              //   vertical-align: middle;
              //   .ant-statistic-content-value-int {
              //     font-size: 30px;
              //     color: #ff7d00;
              //     font-weight: 700;
              //   }
              //   &:nth-of-type(2) {
              //     .ant-statistic-content-value-int {
              //       color: #1d2129;
              //     }
              //   }
              // }
            }
          }
        }
      }
      .patientList {
        background: #f7f8fa;
        border-radius: 8px;
        margin: 16px auto 0;
        height: 146px;
        overflow: hidden;
        &.on {
          margin-bottom: 16px;
        }
        li {
          padding: 12px 16px;
          font-size: 14px;
          p {
            display: inline-block;
            vertical-align: middle;
            &:nth-child(1) {
              width: 130px;
              color: #1d2129;
              span {
                display: inline-block;
                vertical-align: middle;
                &:nth-child(1) {
                  width: 4px;
                  height: 4px;
                  border-radius: 2px;
                  background: #165dff;
                  margin-right: 10px;
                }
              }
            }
            &:nth-child(2) {
              width: calc(100% - 178px);
              color: #1d2129;
              span {
                display: inline-block;
                vertical-align: middle;

                &:nth-child(1) {
                  color: #722ed1;
                  font-weight: 700;
                  padding: 0px 5px;
                  border: 1px solid #722ed1;
                  background: #f5e8ff;
                  border-radius: 2px;
                  margin-right: 5px;
                }
                &:nth-child(2) {
                  max-width: calc(100% - 120px);
                  white-space: nowrap; /* 防止文字换行 */
                  overflow: hidden; /* 控制溢出部分的显示 */
                  text-overflow: ellipsis; /* 添加省略号 */
                }
              }
              // 高亮效果
              &.purple {
                span {
                  &:nth-child(1) {
                    color: #165dff;
                    border-color: #165dff;
                    background: #e8f3ff;
                    // &:hover {
                    //   cursor: pointer;
                    //   opacity: 0.8;
                    // }
                  }
                }
              }
            }
            &:nth-child(3) {
              width: 48px;
              text-align: center;
              background: #ffece8;
              color: #f53f3f;
              font-weight: 700;
              border-radius: 2px;
              &.on {
                background: #f2f3f5;
                color: #4e5969;
              }
            }
          }
          &:hover {
            cursor: pointer;
            background: #e8f3ff;
          }
        }
      }
      :deep(.followUpTable) {
        margin-top: 16px;
        .ant-table-container {
          .ant-table-header {
            tr th {
              padding: 8px 16px;
              background: #f2f3f5;
            }
          }
          .ant-table-body {
            tr td {
              padding: 4px 16px;
              .flexs {
                white-space: nowrap; /* 防止文字换行 */
                overflow: hidden; /* 控制溢出部分的显示 */
                text-overflow: ellipsis; /* 添加省略号 */
                // display: inline-block;
                display: block;
              }
              .btn {
                .ant-btn {
                  padding: 0;
                  color: #165dff;
                  &:nth-child(1) {
                    margin-right: 16px;
                  }
                  &:hover {
                    opacity: 0.8;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.patientModal .ant-modal-content {
  /* padding: 20px 24px; */
  padding: 0;
}
.patientModal .ant-modal-content .ant-modal-header {
  /* padding: 20px 24px; */
  /* padding: 0; */
  padding: 12px 20px;
  margin: 0;
  /* border-bottom: 1px solid #e5e6eb; */
}
.patientModal .ant-modal-header .ant-modal-title {
  font-size: 16px;
}
.patientModal .ant-modal-content .ant-modal-body {
  padding: 24px 20px;
  /* border-bottom: 1px solid #e5e6eb; */
}
.patientModal .wrap .notice {
  background: #fff7e8;
  border-radius: 12px;
  font-size: 14px;
  color: #ff7d00;
  padding: 10px 16px;
  position: relative;
}
.patientModal .wrap .notice p:nth-child(1) img {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  margin-right: 5px;
}
.patientModal .wrap .notice p:nth-child(1) span {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 100px);
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 控制溢出部分的显示 */
  text-overflow: ellipsis; /* 添加省略号 */
}
.patientModal .wrap .notice p:nth-child(2) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  width: 72px;
  background: #165dff;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
}
.patientModal .wrap .notice p:nth-child(2):hover {
  opacity: 0.8;
  cursor: pointer;
}
.patientModal .wrap .scrollWrap {
  height: 350px;
  overflow: auto;
  margin-top: 16px;
}
.patientModal .wrap .list {
  margin: 0;
}
.patientModal .wrap .list li {
  padding: 12px 16px;
  font-size: 14px;
}
.patientModal .wrap .list p {
  display: inline-block;
  vertical-align: middle;
}
.patientModal .wrap .list p:nth-child(1) {
  width: 130px;
  color: #1d2129;
}
.patientModal .wrap .list p:nth-child(1) span {
  display: inline-block;
  vertical-align: middle;
}
.patientModal .wrap .list p:nth-child(2) {
  width: calc(100% - 178px);
  color: #1d2129;
}
.patientModal .wrap .list p:nth-child(2) span {
  display: inline-block;
  vertical-align: middle;
}
.patientModal .wrap .list p:nth-child(2) span:nth-child(1) {
  color: #722ed1;
  font-weight: 700;
  padding: 0px 5px;
  border: 1px solid #722ed1;
  background: #f5e8ff;
  border-radius: 2px;
  margin-right: 5px;
}
.patientModal .wrap .list p:nth-child(2) span:nth-child(2) {
  max-width: calc(100% - 120px);
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 控制溢出部分的显示 */
  text-overflow: ellipsis; /* 添加省略号 */
}
.patientModal .wrap .list p:nth-child(2).purple span:nth-child(1) {
  color: #165dff;
  border-color: #165dff;
  background: #e8f3ff;
}
.patientModal .wrap .list p:nth-child(3) {
  width: 48px;
  text-align: center;
  background: #ffece8;
  color: #f53f3f;
  font-weight: 700;
  border-radius: 2px;
}
.patientModal .wrap .list p:nth-child(3).on {
  background: #f2f3f5;
  color: #4e5969;
}
.patientModal .wrap .list li:hover {
  cursor: pointer;
  background: #e8f3ff;
}
.patientModal .ant-modal-footer {
  margin-top: 16px;
  padding: 0 20px 16px;
}
.patientModal .ant-modal-footer .ant-btn-primary {
  display: none;
}
/*  */
.patientModal .wrapPatient .patient {
  padding: 8px 0;
  border-bottom: 1px solid #e5e6eb;
  margin-bottom: 16px;
}
.patientModal .wrapPatient .patient p {
  display: inline-block;
  vertical-align: middle;
}
.patientModal .wrapPatient .patient p:nth-child(1) {
  width: 100px;
  color: #1d2129;
}

.patientModal .wrapPatient p:nth-child(1) span {
  display: inline-block;
  vertical-align: middle;
}
.patientModal .wrapPatient .on {
  width: calc(100% - 188px);
  color: #1d2129;
}
.patientModal .wrapPatient p:nth-child(2) span {
  display: inline-block;
  vertical-align: middle;
}
.patientModal .wrapPatient p:nth-child(2) span:nth-child(1) {
  color: #722ed1;
  font-weight: 700;
  padding: 0px 5px;
  border: 1px solid #722ed1;
  background: #f5e8ff;
  border-radius: 2px;
  margin-right: 5px;
}
.patientModal .wrapPatient p:nth-child(2).purple span:nth-child(1) {
  color: #165dff;
  border-color: #165dff;
  background: #e8f3ff;
}
.patientModal .wrapPatient p:nth-child(2) span:nth-child(2) {
  width: 180px;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 控制溢出部分的显示 */
  text-overflow: ellipsis; /* 添加省略号 */
}
.patientModal .wrapPatient p:nth-child(3) {
  padding: 5px 16px;
  background: #165dff;
  color: #fff;
  border-radius: 2px;
}
.patientModal .wrapPatient p:nth-child(3):hover {
  opacity: 0.8;
  cursor: pointer;
}
.patientModal .followUpTable .ant-table-header tr th {
  padding: 8px 16px;
  background: #f2f3f5;
}
.patientModal .followUpTable .ant-table-body tr td {
  padding: 4px 16px;
}

.patientModal .followUpTable .ant-table-body tr td .ant-btn:nth-child(1) {
  color: #165dff;
}
.patientModal .followUpTable .ant-table-body tr td .btn.detail .ant-btn:nth-child(1) {
  padding: 4px 15px 4px 0;
}
.patientModal .followUpTable .ant-table-body tr td .btn.detail.on .ant-btn:nth-child(1) {
  color: rgba(0, 0, 0, 0.25);
}
.patientModal .followUpTable .ant-table-body tr td .ant-btn:nth-child(1):hover {
  opacity: 0.8;
}
.patientModal .followUpTable .ant-table-body tr td .btn.detail.on .ant-btn:nth-child(1):hover {
  opacity: 1;
}
.ant-popover .ant-popover-inner .ant-popconfirm-buttons .ant-btn-default:hover {
  color: #165dff;
  border-color: #165dff;
}
.ant-popover .ant-popover-inner .ant-popconfirm-buttons .ant-btn-primary {
  background-color: #165dff;
}
</style>
